<!--pages/more/index.html-->
<section class="info" v-loading.fullscreen.lock="loading">
  <!-- <div class="nav"  @click="goToEntrance">
    <Icon type="left"  style="width:30px;height:30px"></Icon>
  </div> -->
  <tabBar route tabBarPosition="bottom" @onChange="changeBack">
    <tabBarItem selected title="首页" :icon="info" :selectedIcon="info_active" link="/pages/info/index">

      <!-- 标题 -->
      <div class="info_content">
        <div class="info_content_title flex justify-between">
          
          <span>{{navTitle}}</span>
          
          <!-- <span @click="gotoMore">  <Icon type="ellipsis" ></Icon></span> -->
          <span v-if="panType==2||(panSelect!=0&&panType==3)" @click="downloadClick" :style="tiYiSelectedList.length==0?'opacity:0.5':'opacity:0.8'">下载</span>
        
        </div>
      </div>
      <!-- 横线 -->
      <div class="info_content_line">

      </div>
      <!-- 排序和展示选择 -->
      <WingBlank size="md">
        <div class="info_content_nav">
          <div class="info_content_nav_left font-500" @click="changeSort">
            <span v-if="sortVal===0">
              <span class="icon-az iconfont"></span>
              <span>按名称（A-Z） </span>
            </span>
            <span v-if="sortVal===1">
              <span class="icon-file-size iconfont"></span>
              <span>按大小（大-小）</span>
            </span>
            <span v-if="sortVal===2">
              <span class="icon-sort iconfont"></span>
              <span>按修改时间（新-旧）</span>
            </span>
          </div>
          <div class="info_content_nav_right">
            <span v-if="viewVal===1" @click="changeView(2)" class="icon-suolvetumoshi iconfont"></span>
            <span v-if="viewVal===2" @click="changeView(1)" class="icon-liebiao iconfont"></span>
          </div>
        </div>
      </WingBlank>

      <!-- 列表内容 -->


      <div v-if="viewVal===2" class="info_content_file">
        <div class="sortList_breadcrumbs">
          <span  @click="backFilePath" class="icon-a-bianzu25 iconfont"></span>
          <Breadcrumbs devideIcon="/" :pathes="folderPathes" @pathClick="tiYiPathClick" />
        </div>
        <!-- <pull-to-refresh :indicator="indicator" :direction="direction" :isFinished.sync="isFinished" @onRefresh="refresh"> -->
          <ok-checkbox-group class="checkbox-group" :showControl="false" ref="checkboxGroup">
          <div slot="content">
            <div v-if="panSelect==0&&panType==3" class="custom-order ok-selectlist">
              <div v-for="item in customList" :key="String(item.id)+String(item.checkValue)" class="ok-selectlist-item" :class="{'active':item.checkValue}">
                <div @click="aliPanClick(item)" class="ok-selectlist-thumb">
                  <imgItem :fileName="item.name" :isDir="!item.fileType" :content="item" />
                </div>
                <div @click="aliPanClick(item)" class="ok-selectlist-content">
                  <div class="ok-selectlist-content-title">
                    <div class="ok-selectlist-title width-60">{{item.name}}</div>
    
                  </div>
                </div>
                
              </div>
            </div>

            <div v-else class="custom-order ok-selectlist">
              <div v-for="item in customList" :key="String(item.id)+String(item.checkValue)" class="ok-selectlist-item" :class="{'active':item.checkValue}">
                <div class="ok-selectlist-icon">
                  <label class="ok-checkbox-wrapper">
                    <ok-checkbox :checked="item.checkValue" :key="String(item.id)+String(item.checkValue)" @onChange="(val)=>{checkChangeValue(val,item)} " />
                  </label>
                </div>
                <div @click="tiYiFolderClick(item)" class="ok-selectlist-thumb"><imgItem :fileName="item.name" :isDir="!item.fileType" :content="item" />
                </div>
                <div @click="tiYiFolderClick(item)" class="ok-selectlist-content">
                  <div class="ok-selectlist-content-title">
                    <div class="ok-selectlist-title width-60">{{item.name}}</div>
                    <div class="ok-selectlist-subtitle">{{item.time}}<span style="margin:0px 6px"></span></span>{{item.sizeStr}}</div>
                  </div>
                </div>
                <div class="ok-selectlist-extra">
                  <div>
                    <svg class="ok-icon ok-icon-ellipsis ok-icon-md">
                      <use xlink:href="#ellipsis"></use>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </ok-checkbox-group>
        <!-- </pull-to-refresh> -->
        

      </div>



      <div v-if="viewVal===1" class="info_content_file_view" >
        <div class="sortList_breadcrumbs">
          <span  @click="backFilePath" class="icon-a-bianzu25 iconfont"></span>
          <Breadcrumbs devideIcon="/" :pathes="folderPathes" @pathClick="tiYiPathClick" />
        </div>
        <!-- <pull-to-refresh :indicator="indicator_view" :direction="direction_view" :isFinished.sync="isFinished_view" @onRefresh="refresh_view"> -->
          <ok-checkbox-group class="checkbox-group" :showControl="false" ref="checkboxGroup">
            <div slot="content">
            <div v-if="panSelect==0&&panType==3" class=" card_container">
              <div v-for="item in customList" :key="String(item.id)+String(item.checkValue)" class="ok-card ">
                <div class="slot slot_middle" @click="aliPanClick(item)">
                  <div class="slot_middle_img">
                    <imgItem :fileName="item.name" :isDir="!item.fileType" :content="item" />
                  </div>
                </div>
                <div class="slot slot_tail">
                  <span class="name">{{item.name}}</span>
                </div>
              </div>
            </div>

            <div v-else class=" card_container">
              <div v-for="item in customList" :key="String(item.id)+String(item.checkValue)" class="ok-card ">
                <div class="slot slot_middle" @click="tiYiFolderClick(item)">
                  <div class="slot_middle_img">
                    <imgItem :fileName="item.name" :isDir="!item.fileType" :content="item" />
                  </div>
                </div>
                <div class="slot slot_tail">
                  <span class="name">{{item.name}}</span>
                  <ok-checkbox :checked="item.checkValue" :key="String(item.id)+String(item.checkValue)" @onChange="(val)=>{checkChangeValue(val,item)} " />
                </div>
              </div>
            </div>
            </div>
          </ok-checkbox-group>
        <!-- </pull-to-refresh> -->
      </div>





    </tabBarItem>
    <!-- <tabBarItem title="上传" :icon="up" :selectedIcon="up_active" link="/pages/upload/index">
    </tabBarItem> -->
    <tabBarItem title="传输" :icon="down" :selectedIcon="down_active" link="/pages/download/index">
    </tabBarItem>
    <tabBarItem title="我的" :icon="user" :selectedIcon="user_active" link="/pages/my/index">
    </tabBarItem>
  </tabBar>

  <!-- 下面 应该封装组件的,  不过时间紧, 直接复制最快了 -->
  <ActionSheet type="custom" :visible.sync="sortShow" id="customActionSheet">
    <div slot="customContent" class="sortList">
      <div class="sortList_title">
        排序
      </div>
      <div class="sortList_content">
        <div @click="editSort(0)" :class="{ 'active': sortVal===0  }">
          <span>
            <span class="icon-az iconfont mg-rg-4"></span>
            <span>按名称（A-Z）</span>
          </span>
          <Icon type="check" v-show="sortVal===0"></Icon>
        </div>
        <div @click="editSort(1)" :class="{ 'active': sortVal===1  }">
          <span>
            <span class="icon-file-size iconfont mg-rg-4"></span>
            <span> 按大小（大-小）</span>
          </span>
          <Icon type="check" v-show="sortVal===1"></Icon>
        </div>
        <div @click="editSort(2)" :class="{ 'active': sortVal===2  }">
          <span>
            <span class="icon-sort iconfont mg-rg-4"></span>
            <span> 按修改时间（新-旧）</span>
          </span>
          <Icon type="check" v-show="sortVal===2"></Icon>
        </div>
      </div>
    </div>
  </ActionSheet>


  <ActionSheet type="custom" :visible.sync="viewShow" id="customActionSheet">
    <div slot="customContent" class="sortList">
      <div class="sortList_title">
        视图
      </div>
      <div class="sortList_content">
        <div :class="{ 'active': viewVal===1  }" @click="editChangeView(1)">
          <span>
            <span class="icon-suolvetumoshi iconfont mg-rg-4"></span>
            <span> 缩略图模式</span>
          </span>
          <Icon type="check" v-show="viewVal===1"></Icon>
        </div>
        <div :class="{ 'active': viewVal===2  }" @click="editChangeView(2)">
          <span>
            <span class="icon-liebiao iconfont mg-rg-4"></span>
            <span> 列表模式</span>
          </span>
          <Icon type="check" v-show="viewVal===2"></Icon>
        </div>
      </div>
    </div>
  </ActionSheet>

  <ActionSheet type="custom" :visible.sync="downloadMethodShow" id="customActionSheet">
    <div slot="customContent" class="sortList">
      <div class="sortList_title">
        下载选择
      </div>
      <div class="sortList_content">
        <div class='active' @click="downloadMethodHandle(1)">
          <span>
            <span class="icon-az iconfont mg-rg-4"></span>
            <span> 下载到天翼云盘 </span>
          </span>
          <Icon type="check"></Icon>
        </div>
        
      </div>
    </div>
  </ActionSheet> 


  <ActionSheet type="custom" :visible.sync="downloadMoreShow" id="customActionSheet">
    <div slot="customContent" class="sortList">
      <div class="sortList_title">
        下载选择
      </div>
      <div class="sortList_content">
        <div  @click="downloadMoreHandle(1)">
          <span>
            <span class="icon-multiple iconfont mg-rg-4"></span>
            <span> 多选下载 </span>
          </span>
      
        </div>
        
      </div>
    </div>
  </ActionSheet> 
</section>